<template>
  <div>
    <div class="small3">
      <small3 v-for="num in 3" :key="num" ref="small3"></small3>
    </div>
    <p>mixin:混入,mixin可以当做是一个小型的组件，组件的选项都可以写到mixin中</p>
    <button @click="show">click</button>
    <p>
      当混入对象和组件冲突时：
      1. data冲突时，以组件的data为准；
      2. 生命周期冲突时，先执行mixin的生命周期，再执行组件的生命周期
      3. methods冲突时，以组件为准
    </p>
    <hr>
    <p>在vue项目中使用第三方插件：1. npm i xxx（安装插件的包）2.引入（全局引入-main.js和局部引入）</p>
    <button @click="toggle">卷起/放下</button>
    <div ref="div1" class="div1">content</div>
  </div>
</template>

<script>
import myMixin from "../utils/mixin";
import small3 from './small3.vue'
// 局部引入第三方插件
import $ from 'jquery'
export default {
  mixins: [myMixin],
  data() {
    return {
      msg: "我是组件的数据",
    };
  },
  created() {
    console.log("组件：", this.msg);
  },
  components: {
    small3: small3
  },
  mounted() {
    // ref的作用：选择dom，为后续操作dom做准备
    // 1. ref的第一个用法：获取元素dom节点，操作他
    this.$refs.div1.innerHTML = '别的';
    // 2. ref的第二个用法：获取组件的节点，获取它的属性或者调用方法
    console.log(this.$refs.small3[0].info1);
    this.$refs.small3[0].ask()
    // 3. ref的第三个用法：获取循环出来的dom结构
    console.log(this.$refs.small3);
  },
  destroyed() {
    console.log('我的实例别销毁了');
  },
  methods: {
    show() {
      console.log("组件:", "按钮被点击了");
    },
    toggle() {
      // 卷起放下的切换
      $('.div1').slideToggle();
    }
  },
};
</script>

<style scoped>
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.small3 {
  border: 10px solid red;
}
</style>